<template>
    <div class="container">
  
      <h1>隐私政策</h1>
  
      <!-- 锚点链接 -->
      <div class="anchor-links">
        <a href="#introduction">1. 引言</a>
        <a href="#info-collection">2. 我们收集哪些信息</a>
        <a href="#info-usage">3. 我们如何使用您的信息</a>
        <a href="#info-sharing">4. 我们如何共享、转让、公开披露您的信息</a>
        <a href="#info-protection">5. 我们如何保护您的信息</a>
        <a href="#your-rights">6. 您的权利</a>
        <a href="#children-info">7. 我们如何处理儿童的个人信息</a>
        <a href="#policy-updates">8. 隐私政策的更新</a>
        <a href="#contact-us">9. 联系我们</a>
      </div>
  
      <!-- 隐私政策内容 -->
      <div id="introduction">
        <h2>1. 引言</h2>
        <p>欢迎使用"愈见希望"病友交流平台（以下简称"平台"）。我们高度重视您的隐私保护，并致力于通过本隐私政策向您清晰地说明我们如何收集、使用、存储和保护您的个人信息。</p>
        <p>本隐私政策适用于平台网站、移动应用及其他相关服务。</p>
      </div>
  
      <div id="info-collection">
        <h2>2. 我们收集哪些信息</h2>
        <p>我们可能会收集以下信息：</p>
        <ul>
          <li><strong>个人信息：</strong>例如姓名、手机号、邮箱、身份证号（实名认证）、病情信息等。</li>
          <li><strong>设备信息：</strong>例如IP地址、设备型号、操作系统版本等。</li>
          <li><strong>使用信息：</strong>例如浏览记录、搜索记录、点击记录等。</li>
          <li><strong>位置信息：</strong>例如GPS定位、Wi-Fi接入点等（需用户授权）。</li>
        </ul>
      </div>
  
      <div id="info-usage">
        <h2>3. 我们如何使用您的信息</h2>
        <p>我们可能会将您的信息用于以下用途：</p>
        <ul>
          <li><strong>提供服务：</strong>例如用户注册、登录、信息发布、交流互动等。</li>
          <li><strong>改善服务：</strong>例如分析用户行为、优化平台功能、开发新服务等。</li>
          <li><strong>安全保障：</strong>例如身份验证、风险控制、防止欺诈等。</li>
          <li><strong>法律合规：</strong>例如配合政府部门监管、处理投诉举报等。</li>
        </ul>
      </div>
  
      <div id="info-sharing">
        <h2>4. 我们如何共享、转让、公开披露您的信息</h2>
        <p>我们可能会在以下情况下共享、转让或公开披露您的信息：</p>
        <ul>
          <li><strong>共享：</strong>例如与合作的第三方服务提供商共享必要信息（需用户授权）。</li>
          <li><strong>转让：</strong>例如在平台合并、收购或破产清算情况下，用户信息可能会被转让。</li>
          <li><strong>公开披露：</strong>例如根据法律法规要求或政府主管部门强制性要求。</li>
        </ul>
      </div>
  
      <div id="info-protection">
        <h2>5. 我们如何保护您的信息</h2>
        <p>我们采取以下措施保护您的信息安全：</p>
        <ul>
          <li><strong>技术措施：</strong>例如数据加密、访问控制、安全审计等。</li>
          <li><strong>管理措施：</strong>例如制定隐私政策、开展员工培训等。</li>
          <li><strong>应急预案：</strong>例如制定数据安全事件应急预案，及时处置安全事件。</li>
        </ul>
      </div>
  
      <div id="your-rights">
        <h2>6. 您的权利</h2>
        <p>您享有以下权利：</p>
        <ul>
          <li>访问、更正、删除您的个人信息。</li>
          <li>撤回您的同意。</li>
          <li>注销您的账户。</li>
          <li>获取您的个人信息副本。</li>
          <li>限制或拒绝我们处理您的个人信息。</li>
        </ul>
      </div>
  
      <div id="children-info">
        <h2>7. 我们如何处理儿童的个人信息</h2>
        <p>平台仅面向成年人提供服务，不会主动收集儿童的个人信息。如果发现儿童未经监护人同意向我们提供了个人信息，我们会尽快删除相关信息。</p>
      </div>
  
      <div id="policy-updates">
        <h2>8. 隐私政策的更新</h2>
        <p>我们可能会根据法律法规的变化和平台业务的发展，适时更新本隐私政策。更新后的隐私政策将在平台公布，并通过适当方式提醒用户。</p>
      </div>
  
      <div id="contact-us">
        <h2>9. 联系我们</h2>
        <p>如果您对本隐私政策有任何疑问或建议，请通过以下方式联系我们：</p>
        <ul>
          <li>邮箱：privacy@yujianhope.com</li>
          <li>电话：400-123-4567</li>
        </ul>
      </div>
  
      <!-- 下载链接 -->
      <div class="download-link">
        <a href="privacy-policy.pdf" download="愈见希望隐私政策.pdf">下载隐私政策（PDF）</a>
      </div>
    </div>
  </template>
<script>
export default {
    name: 'Privacy'
    }
</script>

<style scoped>
body {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #f5f9fc;
  color: #2d3748;
  line-height: 1.6;
}

.container {
  max-width: 800px;
  margin: 2rem auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(74, 175, 254, 0.1);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  border: 1px solid #e3f2fd;
  text-align: left;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, #4f8bf9, #2ac9e6);
}

h1 {
  color: #1a73e8;
  font-size: 2.2rem;
  margin-bottom: 1.8rem;
  position: relative;
  padding-bottom: 1rem;
  text-align: center;
  font-weight: 600;
}

h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(to right, #4f8bf9, #2ac9e6);
  border-radius: 2px;
}

h2 {
  color: #1a73e8;
  font-size: 1.5rem;
  margin: 2rem 0 1rem;
  border-bottom: 1px solid #e3f2fd;
  padding-bottom: 0.5rem;
}

p {
  color: #4a5568;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
h2, p {
  text-align: left;
}
ul {
  margin: 0 0 1.5rem 1.5rem;
  padding: 0;
  list-style: disc;
  text-align: left;
}

ul li {
  position: relative;
  padding-left: 0; 
  text-indent: 0;
  line-height: 1.7;
  margin-bottom: 0.8rem;
  display: block; 
  width: 100%;
  text-align: left; 
}

ul li::before {
  content: "·";
  color: #1a73e8;
  margin-right: 8px;
  font-weight: bold;
  font-size: 1.1em;
}


.anchor-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 2.5rem;
  padding: 1.2rem;
  background: #f0f7ff;
  border-radius: 10px;
  border: 1px solid #e3f2fd;
}

.anchor-links a {
  padding: 0.6rem 1.2rem;
  background: white;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.1);
  font-size: 0.95rem;
  color: #1a73e8;
  font-weight: 500;
  transition: all 0.3s;
}

.anchor-links a:hover {
  background: #1a73e8;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.2);
}

.download-link {
  text-align: center;
  margin-top: 3.5rem;
}

.download-link a {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2.2rem;
  background: linear-gradient(to right, #4f8bf9, #2ac9e6);
  color: white;
  border-radius: 30px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(74, 175, 254, 0.3);
  transition: all 0.3s;
  font-size: 1.05rem;
}

.download-link a:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(74, 175, 254, 0.4);
  background: linear-gradient(to right, #3a7bd5, #1ab6d9);
}

#miscellaneous ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1.5rem;
  text-align: left;
}

#miscellaneous ul li {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 1.05rem;
  text-align: left;
}

@media (max-width: 768px) {
  .container {
    padding: 1.8rem;
    margin: 1rem;
    border-radius: 8px;
  }
  
  h1 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }
  
  .anchor-links {
    flex-direction: column;
    gap: 0.6rem;
  }
  
  .anchor-links a {
    width: 100%;
    text-align: center;
  }
}

html {
  scroll-behavior: smooth;
}

strong {
  color: #1a73e8;
  font-weight: 600;
}
</style>